<template>
  <div>
    <van-row style="padding-top:1rem;padding-bottom: 1rem">
      <van-col span="7">
         
        <table>
          <tr>
            <th>工作流编号</th>
            <th>工作流名称</th>
<!--            <th>工作流参数</th>-->
          </tr>
          <tr v-for="(i,index) in worklists" @click="selectwork(index)" :key="i.id">
            <td>{{i.id}}</td>
            <td>{{i.name}}</td>
          </tr>
        </table>
      </van-col>
      <van-col span="12"><p>{{worklist['name']}}</p>
        <div v-for="i in worklist['params']" :key="i.id" align="left">
          <van-field :label="i.name" v-if="i.type=='input'" v-model="tfvalue['name']" placeholder="请输入" />
          <el-select  v-if="i.type=='select'" v-model="tfvalue['type']">
            <el-option :value="j.name" v-for="j in i['value']" :key="j.name">{{j.name}}</el-option>
          </el-select>
          <div class="block" v-if="i.type=='datetime'" >
            <el-date-picker
                v-model="tfvalue['datetime']"
                type="datetimerange"
                start-placeholder="Start Date"
                end-placeholder="End Date"
                :default-time="defaultTime"
            >
            </el-date-picker>
          </div>
          <van-uploader v-if="i.type=='file'" v-model="tfvalue['file']" />
        </div>
       
        
         <van-cell is-link @click="showPopup"><span @click="getdept">选择审批人</span></van-cell>

        <van-popup v-model:show="show" :style="{ height: '60%' ,width:'40%'}">
        <el-tree show-checkbox :data="data" :props="defaultProps" @check="select"></el-tree>
        <van-button @click="confirm">确认</van-button> 
        </van-popup>
        
         <van-button @click='submit'> 提交 </van-button>
        
        </van-col>

       

           
    </van-row>

    
  </div>
</template>

<script>
import {ref} from 'vue'
import axios from "../../http/axios";

export default {
  setup() {
    const show = ref(false);
    const showPopup = () =>{
      show.value = true;
    };
    return {
      show,
      showPopup,
      };
    },
  data(){
    return{
      id:1,
      worklists:[],
      worklist:{},
      // 时间
      value1:[],
      // 默认时间
      defaultTime:[new Date(2021,12,22,0,0,0)],
      // 绑定的数据
      tfvalue:{},
      // 展示tree列表
      data:[],
      lists:[],
      defaultProps:{
          children:'children',
          label:'name'
      },

    }
  },
  methods:{
    selectwork(index){
      this.worklist=this.worklists[index]
      console.log(this.worklist)
    },
    getworkf(){
      axios("query_workflow","get").then(res=>{
        let lst = res.list
        for(var i =0;i<lst.length;i++){
          lst[i]["params"]=JSON.parse(res.list[i]["params"])
        }
        this.worklists=lst
        // console.log(this.worklists)
      })
    },

    get_tree(){
      axios('getdept','get').then(res=>{
        this.data = res.list
        console.log(this.data);
        console.log(res);
      })
    },
    confirm(){
      this.list1 = this.lists
      console.log(this.list1);

      },

    select(val){
      this.lists.push(val['rid'])
      console.log(this.lists);
      },

     submit(){
            if(this.pic){
                let label = this.getlabelByType('file')
                this.values[label] = this.pic
            }
            if(this.value1.length>0){
                let stime = this.getlabelByType('datetime')
                this.values[stime] = this.value1[0]
                this.values['结束时间'] = this.value1[1]
            }
           //获取第一个input框中的信息
           let name = document.getElementsByTagName('input')[0].value
           let title = this.workflist['name']+name
           axios('taskm','post',{'title':title,'params':JSON.stringify(this.values),'auditids':this.checkdvalues}).then(res=>{
                  console.log(res);
           })
           
        }

  },
  mounted() {
    this.getworkf()
    this.get_tree()
  }
}
</script>

<style scoped>

</style>